<template>
    <div>
        <div class="head">
            <text class="text-head">添加单据原料</text>
            <image src="https://olwr1lamu.qnssl.com/save1.png" class="img-save" @click="imgsave"></image>
        </div>
        <div class="content">

            <list class="scroller">
                <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
                    <text class="indicator">下拉刷新……</text>
                </refresh>

                <cell class="cell" v-for="item in lists">

                    <div class="panel" @click="imgclick(item)">

                        <div v-if="item.status == 'on' ">
                            <image class="chose" :src="on"></image>
                        </div>
                        <div v-else>
                            <image class="chose" :src="off"></image>
                        </div>

                        <div class="panel-text">
                            <div class="panel-head">
                                <text class="text">原料名称:</text>
                                <text class="text">{{item.name}}</text>
                            </div>

                            <div class="panel-head" v-if="item.status == 'on' ">
                                <text class="text-num">数量:</text>
                                <input ref="input" class="input" type="tel" name="onNum" @input="onNum"></input>
                                <text class="text">{{item.unitName}}</text>
                            </div>
                        </div>

                    </div>
                </cell>
            </list>

        </div>
    </div>
</template>

<script>
    import route from 'router/page'
    import mixins from 'mixins'

    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    const stream = weex.requireModule('stream')

    export default {
        data: {
            refreshing: false,
            lists: [],
            numList: [],
            purchaseDetailList: [],
            purchaseInfoid: '',
            statusList: [],
            paperGoods: [],
            on: 'https://olwr1lamu.qnssl.com/zhong4.png',
            off: 'https://olwr1lamu.qnssl.com/wei.png'
        },
        mixins: [mixins],
        methods: {
            naviBarLeftItemClick () {
                this.router.pop()
                this.router.pop()
            },
            imgclick (item) {
                if (item.status == 'off') {
                    item.status = 'on'
                } else {
                    item.status = 'off'
                }
            },
            onNum(event) {
                this.numList.push(event.value)
            },
            onrefresh (event) {
                modal.toast({message: '刷新中', duration: 1})
                this.refreshing = true
                setTimeout(() => {
                    this.refreshing = false
                }, 200)
            },
            imgsave () {
                // let purchaseInfoid = ''
                storage.getItem('id', event => {

                    this.purchaseInfoid = event.data

                    // 回调有延迟
                    for (var i = this.lists.length - 1; i >= 0; i--) {
                        let item = this.lists[i]
                        if (item.status == 'on') {
                            this.purchaseDetailList.push({
                                entityId: 100010,
                                selfEntityId: 100010,
                                goodsId: item.id,
                                purchaseInfoId: this.purchaseInfoid,
                                unit: item.unitName,
                                num: this.numList[i]
                            })
                        }
                    }

                    const purchaseDetailListStr = JSON.stringify(this.purchaseDetailList)
                    stream.fetch({
                        method: 'POST',
                        type: 'JSON',
                        url: this.imgUrl.collect.computerUrl + 'savePurchaseDetail',
                        body: 'purchaseDetail=' + purchaseDetailListStr
                    }, callback => {
                        modal.toast({message: '保存成功', duration: 1})
                    })

                })
                this.router.pop()
                this.router.pop()

                this.router.push({
                    page: this.routerPage.purchaseInfo
                })
            }

        },
        created () {
            stream.fetch({
                method: 'GET',
                type: 'json',
                url: this.imgUrl.collect.computerUrl + 'getGoodsList'
            }, callback => {
                this.lists = callback.data
            })


            let purchaseInfoid = ''
            storage.getItem('id', event => {
                purchaseInfoid = event.data
                modal.toast({message: purchaseInfoid, duration: 1})
            })
        }
    }
</script>
<style>
    .text-head {
        font-size: 32px;
        font-weight: bold;
        margin-left: 260px;
    }

    .head {
        align-items: center;
        flex-direction: row;
    }

    .img-save {
        margin-left: 180px;
        height: 65px;
        width: 100px;
    }

    .head {
        height: 100px;
        width: 750px;
        background-color: #eff3f2;
    }

    .input {
        height: 40px;
        width: 100px;
        border-width: 1px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
    }

    .content {
        position: relative;
        height: 10000px;
    }

    .img-add {
        position: absolute;
        width: 130px;
        height: 130px;
        margin-top: 900px;
        margin-left: 600px;
    }

    .img-top {
        opacity: 0.7;
        width: 130px;
        height: 130px;
    }

    .indicator {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .panel {
        width: 750px;
        height: 150px;
        flex-direction: row;
        border-width: 2px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
    }

    .chose {
        margin-left: 35px;
        margin-top: 25px;
        height: 90px;
        width: 90px;
    }

    .panel-text {
        margin-left: 50px;
        flex-direction: column;
        padding-top: 45px;
    }

    .panel-head {
        flex-direction: row;
    }

    .panel-bottom {
        margin-left: 30px;
        flex-direction: row;
    }

    .text {
        flex-direction: row;
        font-size: 42px;
        text-align: center;
        color: #41B883;
    }

    .text-num {
        font-size: 32px;
    }
</style>

